<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="./cart.css" />
	</head>
	<body>
		<div class="box">
			<div class="container">
				<my-cart></my-cart>
			</div>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			var CartTitle = {
				props: ['name'],
				template: `
          <div class="title">{{ name }}的商品</div>
        `
			}

			var CartList = {
				props: ['shopList'],
				template: `
          <div>
            <div class="item" v-for="item in shopList" :key="item.id">
              <img :src="item.img"/>
              <div class="name">{{ item.name }}</div>
              <div class="change">
                <a href="" @click.prevent="sub(item.id)">－</a>
                <input type="text" class="num" @blur="changeNum(item.id, $event)" :value="item.num" />
                <a href="" @click.prevent="add(item.id)">＋</a>
              </div>
              <div class="del" @click="del(item.id)">×</div>
            </div>
          </div>
        `,
				methods: {
					changeNum: function (id, event) {
						this.$emit('change-num', {
							id: id,
							num: event.target.value,
							type: 'change'
						})
					},
					add: function (id) {
						this.$emit('change-num', {
							id: id,
							type: 'add'
						})
					},
					sub: function (id) {
						this.$emit('change-num', {
							id: id,
							type: 'sub'
						})
					},
					del: function (id) {
						// 把id传递给父组件
						this.$emit('cart-del', id)
					}
				}
			}

			var CartTotal = {
				props: ['shopList'],
				template: `
          <div class="total">
            <span>总价：￥{{ total }}</span>
            <button>结算</button>
          </div>
        `,
				computed: {
					total: function () {
						let allPrice = 0
						this.shopList.forEach((item) => {
							allPrice += item.price * item.num
						})
						return allPrice
					}
				}
			}

			Vue.component('my-cart', {
				data: function () {
					return {
						uname: '萌萌',
						list: [
							{
								id: 1,
								name: 'TCL彩电',
								price: 1000,
								num: 1,
								img: 'img/a.jpg'
							},
							{
								id: 2,
								name: '机顶盒',
								price: 1000,
								num: 1,
								img: 'img/b.jpg'
							},
							{
								id: 3,
								name: '海尔冰箱',
								price: 1000,
								num: 1,
								img: 'img/c.jpg'
							},
							{
								id: 4,
								name: '小米手机',
								price: 1000,
								num: 1,
								img: 'img/d.jpg'
							},
							{
								id: 5,
								name: 'PPTV电视',
								price: 1000,
								num: 2,
								img: 'img/e.jpg'
							}
						]
					}
				},
				template: `
          <div class="cart">
            <cart-title :name='uname'></cart-title>
            <cart-list :shopList='list' @change-num="changeNum($event)" @cart-del="delCart($event)"></cart-list>
            <cart-total :shopList='list'></cart-total>
          </div>
        `,
				components: {
					'cart-title': CartTitle,
					'cart-list': CartList,
					'cart-total': CartTotal
				},
				methods: {
					changeNum: function (val) {
						if (val.type === 'change') {
							this.list.some((item) => {
								if (item.id === val.id) {
									item.num = val.num
									// 终止遍历
									return true
								}
							})
						} else if (val.type === 'sub') {
							this.list.some((item) => {
								if (item.id === val.id) {
									item.num--
									// 终止遍历
									return true
								}
							})
						} else if (val.type === 'add') {
							this.list.some((item) => {
								if (item.id === val.id) {
									item.num++
									// 终止遍历
									return true
								}
							})
						}
					},
					delCart: function (id) {
						var index = this.list.findIndex((item) => {
							return item.id === id
						})
						this.list.splice(index, 1)
					}
				}
			})

			var vm = new Vue({
				el: '.box',
				data: {}
			})
		</script>
	</body>
</html>
